<template>
  <div class="fuli-box">
    <div class="title">会员专享丰富特权</div>
    <div class="list">
      <div class="item" @click="handRZ">
        <img class="icon" src="@/assets/img/vipshenqing.png" alt />
        <div class="text">协会认证</div>
        <div class="name">认证会员可获得专属认证标识还有机会获得档案推荐机会</div>
      </div>
      <div class="item" @click="handTQ">
        <img class="icon" src="@/assets/img/tequan.png" alt />
        <div class="text">会员特权</div>
        <div class="name">
          凡认证会员，均可享有
          XXX酒店入住9折优惠
        </div>
      </div>
      <div class="item" @click="handPX">
        <img class="icon" src="@/assets/img/peixun.png" alt />
        <div class="text">学习培训</div>
        <div class="name">
          认证会员有机会参加专业培训
          活动，并享有优惠
        </div>
      </div>
      <div class="item">
        <img class="icon" src="@/assets/img/chuangjian.png" alt />
        <div class="text">创建活动</div>
        <div class="name">
          认证会员可在官网创建活动
          并获得相关推广资源
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: 'CompanyDetail',
  props: {
    title: {
      type: String,
      default: '文案标题',
    },
  },
  data() {
    return {}
  },
  methods: {
    handRZ() {
      this.$router.push({
        name: 'pageData',
        query: { title: '协会认证' },
      })
    },
    handTQ() {
      this.$router.push({
        name: 'pageData',
        query: { title: '会员特权' },
      })
    },
    handPX() {
      this.$router.push({
        name: 'pageData',
        query: { title: '学习培训' },
      })
    },
  },
  mounted() {},
}
</script>

<style lang='scss'>
@import '@/assets/css/base';
.fuli-box {
  background-color: #fff;
  padding-top: 30px;
  box-sizing: border-box;

  text-align: center;
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    .item {
      width: 48%;
      background: #fafafa;
      padding: px2rem(40) px2rem(30);
      margin-bottom: 30px;
      box-sizing: border-box;
      .name {
        color: #808080;
        font-size: px2rem(22);
        margin-top: 2;
        line-height: px2rem(30);
        margin-top: 4px;
      }
      .text {
        color: #333;
        font-size: px2rem(28);
      }
      .icon {
        width: px2rem(76);
        height: px2rem(76);
        margin-bottom: 8px;
      }
    }
  }
  .title {
    color: #333;
    font-size: px2rem(36);
    font-weight: bold;
    margin-bottom: 20px;
  }
}
</style>
